<template>
  <div class="demo-form">
    <van-tabs-dict dictType="READONLY" :keyValue="keyValue" @dictChange="handleChange"  v-model="active">
      <template slot="1" >
        <van-form label-width="120px" input-align="right">
          <van-field-dict :isMask="isMask" v-model="baseForm1.name" maskType="name" label="姓名" placeholder="请输入姓名"/>
          <van-radio-dict :keyValue="keyValue" @dictChange="handleChange" :dictType="{type: 'SEX', filters: '2', reverse: true}"  v-model="baseForm1.sex" label="性别" />
          <van-select-dict :keyValue="keyValue" @dictChange="handleChange" label="民族" dictType="NATION" v-model="baseForm1.nation"  placeholder="请选择民族"></van-select-dict>
          <van-field-dict :isMask="isMask" v-model="baseForm1.idCard" maskType="idCard" label="身份证号" placeholder="请输入身份证号"/>
          <van-datetime-dict :min-date="minDate" :max-date="maxDate" v-model="baseForm1.birthday" label="出生日期" type="date" placeholder="请选择出生日期"/>
          <van-calendar-dict :min-date="minDate2" :max-date="maxDate" v-model="baseForm1.followDate" label="关注日期" placeholder="关注公众号日期"/>
          <van-field-dict :isMask="isMask" v-model="baseForm1.mobile" maskType="mobile" label="手机号" placeholder="请输入手机号"/>
          <van-cascader-dict :keyValue="keyValue" @dictChange="handleChange" :fieldNames="{idField: 'id', value: 'id'}" label="所属地区" title="地区选择" dictType="CITY" placeholder="请选择所属地区" v-model="baseForm1.area" ></van-cascader-dict>
          <van-field-dict :isMask="isMask" v-model="baseForm1.address" maskType="address" label="居住住址" placeholder="请输入居住住址"/>
          <van-checkbox-dict :keyValue="keyValue" @dictChange="handleChange" v-model="baseForm1.colors" dictType="COLORS" label="喜爱的颜色" placeholder="请选择喜爱的颜色"/>
          <van-multiple-select-dict :keyValue="keyValue" @dictChange="handleChange" height="50vh" v-model="baseForm1.sports" dictType="SPORTS" label="喜爱的运动" placeholder="请选择喜爱的运动"/>
        </van-form>
      </template>
      <template slot="2">
        <van-form label-width="120px" input-align="right" :readonly="true">
          <van-field-dict :isMask="isMask" v-model="baseForm2.name" maskType="name" label="姓名" placeholder="请输入姓名"/>
          <van-radio-dict  :dictType="{type: 'SEX', filters: '2', reverse: true}"  v-model="baseForm2.sex" label="性别" />
          <van-select-dict label="民族" dictType="NATION" v-model="baseForm2.nation"  placeholder="请选择民族"></van-select-dict>
          <van-field-dict :isMask="isMask" v-model="baseForm2.idCard" maskType="idCard" label="身份证号" placeholder="请输入身份证号"/>
          <van-datetime-dict :min-date="minDate" :max-date="maxDate" v-model="baseForm2.birthday" label="出生日期" type="date" placeholder="请选择出生日期"/>
          <van-calendar-dict :min-date="minDate2" :max-date="maxDate" v-model="baseForm2.followDate" label="关注日期" placeholder="关注公众号日期"/>
          <van-field-dict :isMask="isMask" v-model="baseForm2.mobile" maskType="mobile" label="手机号" placeholder="请输入手机号"/>
          <van-cascader-dict label="所属地区" title="地区选择" dictType="CITY" :fieldNames="{idField: 'id', value: 'id'}"  placeholder="请选择所属地区" v-model="baseForm2.area" ></van-cascader-dict>
          <van-field-dict :isMask="isMask" v-model="baseForm2.address" maskType="address" label="居住住址" placeholder="请输入居住住址"/>
          <van-checkbox-dict v-model="baseForm2.colors" dictType="COLORS" label="喜爱的颜色" placeholder="请选择喜爱的颜色"/>
          <van-multiple-select-dict height="50vh" v-model="baseForm2.sports" dictType="SPORTS" label="喜爱的运动" placeholder="请选择喜爱的运动"/>
        </van-form>
      </template>
    </van-tabs-dict>

    <div class="btn-box">
      <div class="tip-box">
        <div>当前keyValue值为: <span style="color: blue;">{{ keyValue }}</span></div>
        <span>keyValue为true时，选项改变时，返回数据类型为带详细数据的对象类型，为false时，仅返回值。</span>
      </div>
      <van-button type="info" size="large" @click="keyValue=!keyValue">{{keyValue ?  "keyValue设置为false" : "keyValue设置为true" }}</van-button>
      
      <van-button style="margin-top: 24px" type="primary" size="large" @click="isMask=!isMask">{{isMask ?  "不脱敏" : "脱 敏" }}</van-button>

    </div>
  </div>
</template>
<script>
export default {
  name: "demo",
  data() {
    return {
      isMask: true, // 是否脱敏
      active: "1", // 当前所在tab
      keyValue: false, // 是否keyValue
      minDate: null, // 最小可选日期
      minDate2: null, // 最小可选日期
      maxDate: null, // 最大可选日期
      baseForm1: {
        name: "沈小布", // 姓名
        sex: "0", // 性别
        nation: "1", // 民族
        idCard: "350624199905201314", // 身份证号
        birthday: "1999-05-20", // 出生年月日
        followDate: "2013-01-04", // 关注日期
        mobile: "18885201314", // 手机号
        area: "35062400", // 所属地区
        address: "宁夏回族自治区桂花村5201314号", // 居住地址
        colors: ["1", "2"], // 喜爱的颜色
        sports: ["1", "2"] // 喜爱的运动
      },
      baseForm2: {
        name: "沈小布", // 姓名
        sex: "0", // 性别
        nation: "1", // 民族
        idCard: "350624199905201314", // 身份证号
        birthday: "1999-05-20", // 出生年月日
        followDate: "2013-01-04", // 关注日期
        mobile: "18885201314", // 手机号
        area: "35062400", // 所属地区
        address: "宁夏回族自治区桂花村5201314号", // 居住地址
        colors: ["1", "2"], // 喜爱的颜色
        sports: ["1", "2"] // 喜爱的运动
      }
    }
  },
  async created() {
    this.setMinMaxDate()
  },
  methods: {
    handleGoHome() {
      const data = {
        mainFunc: "$router",
        funcName: "replace",
        funcItem: "/dashboard"
      }
      window.top.postMessage(data, "*")
    },
    handleLogout() {
      const data = {
        mainFunc: "logout"
      }
      window.top.postMessage(data, "*")
    },
    // 设置最大最小可选日期
    setMinMaxDate() {
      const currentDate = new Date()
      const minYear = currentDate.getFullYear() - 120
      const minYear2 = currentDate.getFullYear() - 20
      const month = currentDate.getMonth() + 1
      const day = currentDate.getDate()
      this.minDate = new Date(`${minYear}/${String(month).padStart(2, "0")}/${String(day).padStart(2, "0")}`)
      this.minDate2 = new Date(`${minYear2}/${String(month).padStart(2, "0")}/${String(day).padStart(2, "0")}`)
      this.maxDate = currentDate
    },
    // 选项改变事件
    handleChange(val) {
      console.log("🚀 ~ handleChange ~ val:", val)
    }
  }
}
</script>
<style scoped lang="less">
.demo-form{
  .btn-box{
    padding: 0 16px;
    margin-top: 100px;
  }

  .tip-box{
    background: #ff976a;
    color: #fff;
    margin-bottom: 12px;
    border-radius: 8px;
    padding: 6px;
    font-size: 14px;
  }

  /deep/ .van-radio__label--disabled, /deep/ .van-checkbox__label--disabled{
    color: unset !important;
  }
}
</style>